<!-- 指令补充：事件修饰符 -->
<script setup>
/**
 * 事件修饰符有两个：
 * <1> .stop：阻止冒泡
 *    当子元素与父元素同时监听同一事件时，
 *    若是子元素事件触发，则父元素事件也会触发，而我们对事件使用.stop即可阻止其向上传递
 * <2> .prevent: 阻止默认行为
 *    在html中，一些标签会存在默认行为，如提交表单会刷新页面，点击a标签会进行跳转等，这都是默认行为
 *    而我们对事件使用.prevent即可阻止其默认行为
 * <3> 并且，无论是按键修饰符还是事件修饰符，都支持链式调用
 */
/**
 * 若是不阻止冒泡事件，当我们点击内部盒子时，外部盒子事件也会被触发
 * 使用.stop事件修饰符阻止后，此现象不复存在
 */
  const onOuter = () => {
    console.log("外部盒子点击事件触发")
  }
  const onInner = () => {
    console.log("内部盒子点击事件触发")
  }

</script>

<template> 
  <div class="outer" @click="onOuter">
    外层容器
    <div class="inner" @click.stop="onInner">
      内层容器
        <!-- 使用.prevent事件修饰符修饰后，点击将不再进行跳转 -->
        <!-- 还可以进行链式调用 -->
        <a href="https://www.baidu.com" @click.prevent.stop="none">点击跳转百度</a>
    </div>
  </div>
  <hr>

</template>

<style scoped>
  .outer {
    padding: 50px 70px;
    width: 200px;
    background-color: rgb(122, 236, 221);
  }
  .inner {
    width: 200px;
    height: 100px;
    background-color: rgb(4, 193, 240);
  } 
</style>